<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<title>boost搜索引擎</title>
</head>

<body>
	<div class="container">
		<div class="search">
			<input type="text" value="请输入..." onfocus= "if(this.value == '请输入...'){this.value = '';}" onblur="if(this.value ==''){this.value = '请输入...'}">
			<button onclick="Search()">搜索一下</button>
		</div>
		<div class="result">
		</div>
	</div>

</body>
<script>
	function Search() {
		// alert("hello world");
		let query = $(".container .search input").val();
		console.log("query = " + query);
		$.ajax({
			type: "GET",
			url: "/s?word=" + query,
			success: function (data) {
				console.log(data);
				BuildHtml(data);
			}
		});
	}

	function BuildHtml(data) {
		let result_lable = $(".container .result");
		result_lable.empty();
		for (let elem of data) {
			// console.log(elem.title);
			// console.log(elem.url);
			let a_lable = $("<a>",
				{
					text:elem.title,
					href:elem.url,
					target:"_blank"
				}
			);
			let p_lable = $("<p>",
				{
					text:elem.desc
				}
			);
			let i_lable = $("<i>",
				{
					text:elem.url
				}
			);
			let div_lable = $("<div>",
				{
					class : "item"
				}
			);
			a_lable.appendTo(div_lable);
			p_lable.appendTo(div_lable);
			i_lable.appendTo(div_lable);
			div_lable.appendTo(result_lable);
		}
	}
</script>
<style>
	/* 去掉网页中的所有的默认内外边距，html的盒子模型 */
	* {
		/* 设置外边距 */
		margin: 0;
		/* 设置内边距 */
		padding: 0;
	}

	/* 将我们的body内的内容100%和html的呈现吻合 */
	html,
	body {
		height: 100%;
	}

	/* 类选择器.container */
	.container {
		/* 设置div的宽度 */
		width: 800px;
		/* 通过设置外边距达到居中对齐的目的 */
		margin: 0px auto;
		/* 设置外边距的上边距，保持元素和网页的上部距离 */
		margin-top: 15px;
	}

	/* 复合选择器，选中container 下的 search */
	.container .search {
		/* 宽度与父标签保持一致 */
		width: 100%;
		/* 高度设置为52px */
		height: 52px;

	}

	/* 先选中input标签， 直接设置标签的属性，先要选中， input：标签选择器*/
	/* input在进行高度设置的时候，没有考虑边框的问题 */
	.container .search input {
		width: 512px;
		height: 16px;
		padding: 12px 16px;
		font-size: 16px;
		margin: 0;
		vertical-align: top;
		outline: 0;
		box-shadow: none;
		border-radius: 10px 0 0 10px;
		border: 2px solid #c4c7ce;
		background: #fff;
		color: #222;
		overflow: hidden;
		box-sizing: content-box;
		-webkit-tap-highlight-color: transparent;
	}

	/* 先选中button标签， 直接设置标签的属性，先要选中， button：标签选择器*/
	.container .search button {
		cursor: pointer;
		width: 108px;
		height: 44px;
		line-height: 45px;
		line-height: 44px \9;
		padding: 0;
		background: 0 0;
		background-color: #4e6ef2;
		border-radius: 0 10px 10px 0;
		font-size: 17px;
		color: #fff;
		box-shadow: none;
		font-weight: 400;
		border: none;
		outline: 0;

	}

	.container .result {
		width: 100%;
	}

	.container .result .item {
		margin-top: 15px;
	}

	.container .result .item a {
		/* 设置为块级元素，单独站一行 */
		display: block;
		/* a标签的下划线去掉 */
		text-decoration: none;
		/* 设置a标签中的文字的字体大小 */
		font-size: 20px;
		/* 设置字体的颜色 */
		color: #4e6ef2;
	}

	.container .result .item a:hover {
		text-decoration: underline;
	}

	.container .result .item p {
		margin-top: 5px;
		font-size: 16px;
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}

	.container .result .item i {
		/* 设置为块级元素，单独站一行 */
		display: block;
		/* 取消斜体风格 */
		font-style: normal;
		color: green;
	}
</style>

</html>